<!-- 年度使用 -->
<template>
    <div class="echarts" id="AnnualUseChart"></div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from "echarts";

interface ChartProp {
    label: string;
    value: string[];
}

let chart: ECharts | null = null;
const gradientColors = ["rgba(254, 219, 101,0.1)", "rgba(0, 122, 254,0.1)", "rgba(255, 75, 122, 0.1)"];

function initChart(data: any = {}): ECharts {
    const charEle = document.getElementById("AnnualUseChart") as HTMLElement;
    const option = buildOption(data);
    chart = init(charEle);
    chart.setOption(option);
    return chart;
}

function updateChart(data: any = {}) {
    const option = buildOption(data);
    chart?.setOption(option);
}

function buildOption(params: any) {
    const option: EChartsOption = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "none",
            },
            borderWidth: 0, //边框线宽
            padding: 0,
            backgroundColor: "transparent",
            formatter: (p: any) => {
                let str = "";
                p.forEach((val: any) => {
                    str += `<div class="year-item">
                                <span class="year-dot" style="background-color: ${val.color};"></span>
                                <span class="year-name">${val.seriesName}</span>
                                <span class="year-value">${val.data >= 10000 ? (val.data / 10000).toFixed(2) + "w" : val.data}</span>
                            </div>`;
                });
                let dom = `
                    <div class="annual-tooTip">
                      <span class="annual-month">${p[0].dataIndex + 1}月</span>
                      <div class="annual-list">
                        ${str}
                      </div>
                    </div>
                  `;
                return dom;
            },
        },

        legend: {
            right: "2%",
            top: "0%",
            itemWidth: 15,
            itemHeight: 6,
            align: "auto",
            icon: "rect",
            itemGap: 15,
            textStyle: {
                color: "#ebebf0",
            },
        },
        grid: {
            top: "20%",
            left: "40",
            right: "4%",
            bottom: "15%",
            // containLabel: true
        },
        xAxis: [
            {
                name: "(月份)",
                type: "category",
                boundaryGap: false,
                axisLine: {
                    // 坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: "#233653",
                    },
                },
                axisLabel: {
                    // 坐标轴刻度标签的相关设置
                    color: "#7ec7ff",
                    padding: 0,
                    fontSize: 12,
                    formatter: function (data) {
                        return data;
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "#192a44",
                    },
                },
                axisTick: {
                    show: false,
                },
                data: params.columns,
            },
        ],
        yAxis: {
            name: "(人数)",
            nameTextStyle: {
                color: "#D6DFEA",
                fontSize: 12,
                padding: [0, 30, 0, 0],
            },
            // nameGap:18,
            minInterval: 1,
            // min: 4,
            splitNumber: 5,
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#192a44",
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#233653",
                },
            },
            axisLabel: {
                show: true,
                color: "#B9D6D6",
                padding: 0,
                formatter: function (value: any) {
                    if (value >= 10000) {
                        value = value / 10000 + "w";
                    }
                    return value;
                },
            },
            axisTick: {
                show: false,
            },
        },
        series: params.data.map((val: ChartProp, index: number) => {
            return {
                name: val.label,
                type: "line",
                symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
                showSymbol: false,
                smooth: true,
                lineStyle: {
                    width: 1,
                    color: params.colors[index], // 线条颜色
                    borderColor: params.colors[index],
                },
                itemStyle: {
                    color: params.colors[index],
                    borderColor: "#646ace",
                    borderWidth: 2,
                },
                tooltip: {
                    show: true,
                },
                areaStyle: {
                    // 区域填充样式
                    // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: params.colors[index], // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: gradientColors[index], // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                    shadowColor: "rgba(25,163,223, 0.3)", //阴影颜色
                    shadowBlur: 20, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
                data: val.value,
            };
        }),
    };

    return option;
}

defineExpose({
    initChart,
    updateChart,
});
</script>

<style scoped lang="less">
.echarts {
    width: 100%;
    height: 100%;
}

:deep(.annual-tooTip) {
    box-sizing: border-box;
    width: 206px;
    height: 103px;
    padding: 5px 20px;
    background: url("../images/contrast-bg.png") no-repeat;
    background-size: 100% 100%;

    .annual-month {
        display: inline-block;
        margin-bottom: 2px;
        font-size: 10px;
        color: #03b8e2;
        transform: scale(0.9);
    }

    .annual-list {
        display: flex;
        flex-direction: column;
        width: 100%;

        .year-item {
            display: flex;
            align-items: center;
            width: 100%;
            height: 22px;

            .year-dot {
                width: 5px;
                height: 5px;
                margin: 0 2px;
                border-radius: 50%;
            }

            .year-name,
            .year-value {
                font-size: 10px;
                color: #03b8e2;
                transform: scale(0.8);
            }

            .year-name {
                margin: 0 2px;
            }

            .year-value {
                display: inline-block;
                width: 25%;
            }
        }
    }
}
</style>
